<template>
    <div class="wrap">
        <MyMenu :titles="names" ref="menuRef" @select="(index: number) => title = index * 1" />
        <div>
            <Company v-if="title == 0" />
            <loss v-if="title == 1" />
            <Debt v-if="title == 2" />
            <Financial v-if="title == 3" />
            <Cash v-if="title == 4" />
            <Dispatch v-if="title == 5" />
        </div>
        <div class="footer">
            <el-popover  width="auto" trigger="click" placement="top" >
                <template #reference>
                  <div class="myherf">{{ $t(i18n.global.t('home.Disclaimer')) }}</div>
                </template>
                <iframe v-if="lang"
                    src="http://www.netquity.hk/service/chidisclaimer.html"
                    width="100%"
                    style="height: 65vh;width: 80vw;"
                ></iframe>
                <iframe v-else
                    src="http://www.netquity.hk/service/engdisclaimer.html "
                    width="100%"
                    style="height: 65vh;width: 80vw;"
                ></iframe>
            </el-popover>
            <!-- <div> <a v-if="lang" href="http://www.netquity.hk/service/chidisclaimer.html" class="myherf">{{ $t(i18n.global.t('home.Disclaimer')) }}</a>
            <a v-else href="http://www.netquity.hk/service/engdisclaimer.html " class="myherf">{{ $t(i18n.global.t('home.Disclaimer')) }}</a></div> -->
           
            <div class="one">{{ $t(i18n.global.t('home.Foot')) }}</div>
            <div class="one">{{ $t(i18n.global.t('home.LastUpdate')) }}:   {{ Time }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import MyMenu from './components/MyMenu.vue';
import Company from './page/Company.vue';
import loss from './page/loss.vue';
import Financial from './page/Financial.vue';
import Debt from './page/Debt.vue';
import i18n from '@/locales';
import Dispatch from './page/Dispatch.vue';
import Cash from './page/Cash.vue';
import { getCurrentInstance } from 'vue';
import X2js from 'x2js';
import { useDateFormat,  useNow } from '@vueuse/core'
import { getList } from '@/api/axios/reqTest';
import { getQueryObj } from '@/utils/common';
const menuRef = ref<any>(null);
const Time = ref();
const lang = ref(false);
const { proxy } = getCurrentInstance() as any;
const title = ref(0);

const $lang = getQueryObj(location.href).Lang;
const names: any = computed(() => {
    return [
        proxy.$t('home.company'),
        proxy.$t('home.lossAccount'),
        proxy.$t('home.balanceSheet'),
        proxy.$t('home.financialRatio'),
        proxy.$t('home.CashFlow'),
        proxy.$t('home.recordDividends'),
    ];
});
onMounted(async () => {
    const x2js = new X2js();
    const xml = await getList();
    const json = x2js.xml2js(xml as any);
    const result: any = json;
    // Time.value = result.CompanySummary._LastUpdate.split(' ')[0];
    Time.value = useDateFormat(useNow(), 'DD/MM/YYYY').value
    if ($lang == 'en') {
        lang.value = false;
    } else if ($lang == 'zh-HK') {
        lang.value = true;
    } else if ($lang == 'zh-CN') {
        lang.value = true;
    }
});
</script>

<style scoped lang="scss">
// .wrap {
//   width: 100vw;
//   @media screen and (orientation: landscape){
//    position: absolute;
//   }
// }
.footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    background-color: var(--tableheaderback);
    bottom: 0;
    position: fixed;
    z-index: 99;
    color: var(--tableheadercolor);
}
.myherf{
    text-decoration: underline;
    cursor: pointer;
    color: var(--tableheadercolor);
}
</style>
<!-- <style>
.el-popper.is-light{
    height: 550px;
}
</style> -->